<!--
 * @Description: What's this for
 * @Autor: WangYuan
 * @Date: 2022-01-18 09:56:36
 * @LastEditors: WangYuan
 * @LastEditTime: 2022-01-18 16:08:38
-->
<template>
  <div class="shape" @click="onChoose" :class="[page.curWidgetId == widget.id ? 'active' : '']">
    <!-- <div v-if="page.curWidgetId == widget.id" class="shape-solid"></div> -->

    <!-- <div v-if="page.curWidgetId == widget.id" class="shape-dashed"></div> -->

    <slot></slot>
  </div>
</template>

<script>
  export default {
    name:'WidgetShape',
    inject: ["page"],
    props: ["widget"],

    data () {
      return {
        isShowBorder: false
      }
    },

    methods: {
      onChoose () {
        this.page.setCurWidgetId(this.widget.id)
      }
    }
  };
</script>

<style lang="scss" scoped>
.shape {
  position: relative;
  cursor: pointer;

  &::after {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1111;
    width: 100%;
    height: 100%;
    content: ' ';
    box-sizing: border-box;
  }

  &:hover, &.active {
    &::after {
      border: solid 2px rgb(255, 76, 21);
      background: rgba($color: #000000, $alpha: 0.1);
    }
  }

  .shape-dashed {
    // display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: solid 2px #155bd4;
    z-index: 1112;
  }

  .shape-solid {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: solid 1px #155bd4;
    z-index: 100;
  }
}
</style>
